<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">用药提醒</view>
            <view class="right">
                <u-icon name="plus" size="32" color="#333" @click="addReminder"></u-icon>
            </view>
        </view>
        
        <!-- 日历 -->
        <view class="calendar">
            <view class="header">
                <u-icon name="arrow-left" size="24" color="#333" @click="prevWeek"></u-icon>
                <text>{{currentMonth}}月</text>
                <u-icon name="arrow-right" size="24" color="#333" @click="nextWeek"></u-icon>
            </view>
            <view class="week-days">
                <view 
                    class="day-item" 
                    v-for="(item, index) in weekDays" 
                    :key="index"
                    :class="{ active: isSameDay(item.date, selectedDate) }"
                    @click="selectDate(item.date)"
                >
                    <text class="week">{{item.week}}</text>
                    <text class="date">{{item.day}}</text>
                    <view class="dot" v-if="hasMedication(item.date)"></view>
                </view>
            </view>
        </view>
        
        <!-- 提醒列表 -->
        <scroll-view class="reminder-list" scroll-y>
            <view v-if="todayMedications.length > 0">
                <view 
                    class="reminder-item" 
                    v-for="(item, index) in todayMedications" 
                    :key="index"
                    @click="editReminder(item)"
                >
                    <view class="item-content">
                        <view class="left">
                            <view class="icon" :style="{ backgroundColor: item.color }">
                                <u-icon :name="item.icon" size="32" color="#fff"></u-icon>
                            </view>
                        </view>
                        <view class="info">
                            <view class="name">{{item.name}}</view>
                            <view class="desc">{{item.desc}}</view>
                            <view class="time">{{formatTime(item.time)}}</view>
                        </view>
                        <view class="status">
                            <view 
                                class="status-tag"
                                :class="item.status"
                            >
                                {{getStatusText(item.status)}}
                            </view>
                            <u-switch 
                                v-model="item.active" 
                                size="24"
                                active-color="#1890FF"
                                @change="toggleReminder(item)"
                            ></u-switch>
                        </view>
                    </view>
                    
                    <view class="action-buttons" v-if="item.status === 'pending'">
                        <view class="button skip" @click.stop="skipReminder(item)">
                            <text>跳过</text>
                        </view>
                        <view class="button complete" @click.stop="completeReminder(item)">
                            <text>已服用</text>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 空状态 -->
            <view class="empty" v-if="todayMedications.length === 0">
                <image src="/static/images/empty.png" mode="aspectFit"></image>
                <text>当日暂无用药提醒</text>
                <view class="add-btn" @click="addReminder">
                    <text>添加提醒</text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        const today = new Date()
        return {
            selectedDate: today,
            currentMonth: today.getMonth() + 1,
            weekDays: [],
            medications: [
                {
                    id: 1,
                    name: '降压药',
                    desc: '早餐后服用，一天一次',
                    icon: 'heart',
                    color: '#FF4D4F',
                    time: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 8, 30),
                    days: [1, 2, 3, 4, 5, 6, 7], // 周一到周日
                    status: 'pending',
                    active: true
                },
                {
                    id: 2,
                    name: '降糖药',
                    desc: '午餐后服用，一天一次',
                    icon: 'medicine',
                    color: '#52C41A',
                    time: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 30),
                    days: [1, 2, 3, 4, 5, 6, 7], // 周一到周日
                    status: 'pending',
                    active: true
                },
                {
                    id: 3,
                    name: '维生素C',
                    desc: '晚餐后服用，一天一次',
                    icon: 'food',
                    color: '#FAAD14',
                    time: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 19, 30),
                    days: [1, 3, 5], // 周一、周三、周五
                    status: 'pending',
                    active: true
                }
            ]
        }
    },
    computed: {
        todayMedications() {
            const weekDay = this.selectedDate.getDay() || 7 // 转换为1-7，表示周一到周日
            return this.medications.filter(item => 
                item.active && 
                item.days.includes(weekDay) && 
                this.isSameDay(new Date(item.time), this.selectedDate)
            ).sort((a, b) => new Date(a.time) - new Date(b.time))
        }
    },
    created() {
        this.initWeekDays()
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        initWeekDays() {
            const date = new Date(this.selectedDate)
            date.setDate(date.getDate() - date.getDay() + 1) // 设置为本周一
            
            const days = []
            for (let i = 0; i < 7; i++) {
                const currentDate = new Date(date)
                currentDate.setDate(date.getDate() + i)
                days.push({
                    date: currentDate,
                    week: this.getWeekDay(i),
                    day: currentDate.getDate()
                })
            }
            
            this.weekDays = days
        },
        getWeekDay(day) {
            const weekDays = ['一', '二', '三', '四', '五', '六', '日']
            return weekDays[day]
        },
        prevWeek() {
            const date = new Date(this.selectedDate)
            date.setDate(date.getDate() - 7)
            this.selectedDate = date
            this.currentMonth = date.getMonth() + 1
            this.initWeekDays()
        },
        nextWeek() {
            const date = new Date(this.selectedDate)
            date.setDate(date.getDate() + 7)
            this.selectedDate = date
            this.currentMonth = date.getMonth() + 1
            this.initWeekDays()
        },
        selectDate(date) {
            this.selectedDate = date
        },
        isSameDay(date1, date2) {
            return date1.getFullYear() === date2.getFullYear() &&
                   date1.getMonth() === date2.getMonth() &&
                   date1.getDate() === date2.getDate()
        },
        hasMedication(date) {
            const weekDay = date.getDay() || 7 // 转换为1-7，表示周一到周日
            return this.medications.some(item => 
                item.active && 
                item.days.includes(weekDay) && 
                this.isSameDay(new Date(item.time), date)
            )
        },
        formatTime(date) {
            const hours = new Date(date).getHours().toString().padStart(2, '0')
            const minutes = new Date(date).getMinutes().toString().padStart(2, '0')
            return `${hours}:${minutes}`
        },
        getStatusText(status) {
            const statusMap = {
                'pending': '待服用',
                'completed': '已服用',
                'skipped': '已跳过'
            }
            return statusMap[status] || '待服用'
        },
        toggleReminder(item) {
            // 切换提醒状态
            console.log('切换提醒状态:', item.id, item.active)
            
            uni.showToast({
                title: item.active ? '已开启提醒' : '已关闭提醒',
                icon: 'none'
            })
        },
        skipReminder(item) {
            // 跳过提醒
            item.status = 'skipped'
            
            uni.showToast({
                title: '已跳过提醒',
                icon: 'none'
            })
        },
        completeReminder(item) {
            // 完成提醒
            item.status = 'completed'
            
            uni.showToast({
                title: '标记为已服用',
                icon: 'success'
            })
        },
        addReminder() {
            uni.navigateTo({
                url: '/pages/health/medication-edit'
            })
        },
        editReminder(item) {
            uni.navigateTo({
                url: `/pages/health/medication-edit?id=${item.id}`
            })
        }
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .calendar {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;
            
            text {
                font-size: 28rpx;
                color: #333;
                font-weight: bold;
            }
        }
        
        .week-days {
            display: flex;
            justify-content: space-between;
            
            .day-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 80rpx;
                height: 120rpx;
                position: relative;
                
                &.active {
                    .week, .date {
                        color: #fff;
                    }
                    
                    &::after {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 80rpx;
                        background-color: #1890FF;
                        border-radius: 10rpx;
                        z-index: -1;
                    }
                }
                
                .week {
                    font-size: 24rpx;
                    color: #999;
                    margin-bottom: 10rpx;
                }
                
                .date {
                    font-size: 28rpx;
                    color: #333;
                    font-weight: bold;
                }
                
                .dot {
                    width: 10rpx;
                    height: 10rpx;
                    background-color: #1890FF;
                    border-radius: 50%;
                    position: absolute;
                    bottom: 20rpx;
                }
            }
        }
    }
    
    .reminder-list {
        height: calc(100vh - 300rpx);
        padding: 20rpx 30rpx;
        
        .reminder-item {
            background-color: #fff;
            border-radius: 10rpx;
            margin-bottom: 20rpx;
            overflow: hidden;
            
            .item-content {
                display: flex;
                padding: 30rpx;
                
                .left {
                    margin-right: 20rpx;
                    
                    .icon {
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 20rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
                
                .info {
                    flex: 1;
                    
                    .name {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 10rpx;
                    }
                    
                    .desc {
                        font-size: 28rpx;
                        color: #666;
                        margin-bottom: 10rpx;
                    }
                    
                    .time {
                        font-size: 28rpx;
                        color: #1890FF;
                    }
                }
                
                .status {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    justify-content: space-between;
                    
                    .status-tag {
                        padding: 4rpx 12rpx;
                        border-radius: 20rpx;
                        font-size: 24rpx;
                        
                        &.pending {
                            color: #FAAD14;
                            background-color: #FFFBE6;
                        }
                        
                        &.completed {
                            color: #52C41A;
                            background-color: #F6FFED;
                        }
                        
                        &.skipped {
                            color: #999;
                            background-color: #F7F7FA;
                        }
                    }
                }
            }
            
            .action-buttons {
                display: flex;
                border-top: 2rpx solid #F7F7FA;
                
                .button {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 80rpx;
                    
                    text {
                        font-size: 28rpx;
                        color: #666;
                    }
                    
                    &.skip {
                        border-right: 2rpx solid #F7F7FA;
                    }
                    
                    &.complete {
                        text {
                            color: #1890FF;
                        }
                    }
                }
            }
        }
        
        .empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 100rpx 0;
            
            image {
                width: 200rpx;
                height: 200rpx;
                margin-bottom: 20rpx;
            }
            
            text {
                font-size: 28rpx;
                color: #999;
                margin-bottom: 40rpx;
            }
            
            .add-btn {
                width: 300rpx;
                height: 80rpx;
                background-color: #1890FF;
                border-radius: 40rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                
                text {
                    font-size: 28rpx;
                    color: #fff;
                    margin-bottom: 0;
                }
            }
        }
    }
}
</style> 